<template>
  <div class="smallCardDivider" :style="getHeight"></div>
</template>
<script>
import {
  WIDTH_PHONE,
  WIDTH_SPREADED,
  WIDTH_PAD_PORTRAIT,
  WIDTH_PAD_LANDSCAPE,
  WIDTH_STANDARD,
  selectWidth,
  flexibleWidth,
  flexibleHeight,
  screenType,
  screenDescription,
  isIOS,
  isSpreadOn,
  screenSize,
  getSecondPageStyle,
  getDialogFlexAlign,
  getDialogStyle,
  getSingleButtonStyle,
} from "../../assets/js/flexible.js";
export default {
  props: {
    heightPro: {
      type: Number,
      default: 12,
    },
  },
  data() {
    return {
      height: 12,
    };
  },
  mounted() {
    this.height = this.heightPro;
  },
  watch: {
    heightPro(newVal) {
      this.height = newVal;
    },
  },
  computed: {
    getHeight() {
      return { height: screenSize(this.height) + "px" };
    },
  },
};
</script>
<style scoped>
.smallCardDivider {
  width: 100%;
}
</style>
